<template>
  <dv-charts :option="option" />
</template>

<script>

import { SupermarketRank } from '@/network/request'

export default {
  name: 'PieChart',
  props: {
    // 数据
    chartsPieData: {
      type: Object,
      required: true
    },
    // 是否显示数值标签
    insideLabelIsShow: {
      type: Boolean,
      required: false,
      default: true
    },
    // 是否显示为玫瑰饼图
    roseTypeIsShow: {
      type: Boolean,
      required: false,
      default: false
    },
    // 饼图半径大小
    pieRadius: {
      type: String,
      required: false,
      default: '50%'
    }
  },
  data () {
    return {
      option: {}
    }
  },
  methods: {
    createChart () {
      SupermarketRank().then(res => {
        let list = []
        list = res.data.map(item => ({
          name: item.productName,
          value: item.salesVolume
        }))
        this.option = {
          series: [
            {
              data: list,
              type: 'pie',
              radius: this.pieRadius,
              insideLabel: {
                show: this.insideLabelIsShow
              },
              outsideLabel: {
                labelLineStyle: {
                  lineWidth: 1
                },
                labelLineBendGap: '10%'
              },
              roseType: this.roseTypeIsShow
            }
          ]
        }
      })
    }
  },
  watch: {
    chartsPieData: {
      handler (newValue, oldValue) {
        if (oldValue != newValue) {
          this.createChart()
        }
      },
      deep: true
    }
  }
}
</script>

</style>
